<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            .class2{
                background-color: grey;
                color: white;
                padding: 5px;
                margin: 2px;
            }
            .class1{
                font-size: x-large;
            }
        </style>

    </head>
    <body>
        <!-- 一个元素可以被归入多个class，空格分隔 -->
        <a class="class1 class2" href="http://apress.com">Apress Web site</a>
        <br/><br/>
        <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
        
        <script type="text/javascript">
            var elems = document.getElementsByClassName("otherclass");
            for (let i = 0; i< elems.length; i++) {
                var x = elems[i];
                x.style.border = "thin solid black";
                x.style.backgroundColor = "white";
                x.style.color = "black";
            }
        </script>
    </body>
    
</html>